<template>
    <div class="china-map-demo">
        <h2>地图组件示例 - 支持多种地图数据</h2>

        <div class="demo-grid">
            <!-- 中国地图 -->
            <div class="demo-item">
                <ChinaMap title="中国地图 - 访问量统计" :data="visitData" :height="400" theme="blue" :showLegend="true"
                    :showLabels="showLabels" map-name="china" />
            </div>

            <!-- 安徽地图 -->
            <div class="demo-item">
                <ChinaMap title="安徽工业大学校园地图 - 用户分布" :data="ahuteData" :height="500" theme="green" :showLegend="true"
                    :showLabels="showLabels" map-name="ahute" />
            </div>

            <!-- 中国地图 - 销售额 -->
            <div class="demo-item">
                <ChinaMap title="中国地图 - 销售额统计" :data="salesData" :height="400" theme="purple" :showLegend="true"
                    :showLabels="showLabels" map-name="china" />
            </div>

            <!-- 安徽地图 - 活跃度 -->
            <div class="demo-item">
                <ChinaMap title="安徽工业大学校园地图 - 地区活跃度" :data="ahuteActivityData" :height="400" theme="red"
                    :showLegend="false" :showLabels="showLabels" map-name="ahute" />
            </div>

            <!-- 安徽地图 - 纯轮廓展示 -->
            <div class="demo-item">
                <ChinaMap title="安徽工业大学校园地图 - 纯轮廓展示" :data="[]" :height="400" theme="blue" :showLegend="false"
                    :showLabels="false" map-name="ahute" />
            </div>

            <div class="demo-item">
                <ChinaMap title="马鞍山市地图" :data="maanshanData" :height="400" theme="blue" :showLegend="true"
                    :showLabels="true" map-name="anshanmaJson" />
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="control-panel">
            <h3>控制选项</h3>
            <div class="controls">
                <div class="control-group">
                    <label>主题颜色：</label>
                    <el-select v-model="currentTheme" @change="updateTheme">
                        <el-option label="蓝色" value="blue" />
                        <el-option label="绿色" value="green" />
                        <el-option label="红色" value="red" />
                        <el-option label="紫色" value="purple" />
                    </el-select>
                </div>

                <div class="control-group">
                    <label>显示图例：</label>
                    <el-switch v-model="showLegend" />
                </div>

                <div class="control-group">
                    <label>显示省份名称：</label>
                    <el-switch v-model="showLabels" />
                </div>

                <div class="control-group">
                    <label>地图高度：</label>
                    <el-slider v-model="mapHeight" :min="200" :max="600" :step="50" show-input />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ChinaMap } from '@/components/charts'

// 控制选项
const currentTheme = ref('blue')
const showLegend = ref(true)
const showLabels = ref(true) // 新增：控制省份名称显示
const mapHeight = ref(400)

// 访问量数据
const visitData = ref([
    { name: '北京', value: 2500, description: '首都地区', unit: '次' },
    { name: '上海', value: 1800, description: '经济中心', unit: '次' },
    { name: '广东', value: 1500, description: '南方省份', unit: '次' },
    { name: '江苏', value: 1200, description: '东部省份', unit: '次' },
    { name: '浙江', value: 1000, description: '沿海省份', unit: '次' },
    { name: '山东', value: 800, description: '北方省份', unit: '次' },
    { name: '四川', value: 600, description: '西南省份', unit: '次' },
    { name: '湖北', value: 500, description: '中部省份', unit: '次' },
    { name: '河南', value: 400, description: '中原省份', unit: '次' },
    { name: '福建', value: 300, description: '东南省份', unit: '次' },
    { name: '辽宁', value: 280, description: '东北省份', unit: '次' },
    { name: '河北', value: 260, description: '华北省份', unit: '次' },
    { name: '湖南', value: 240, description: '中部省份', unit: '次' },
    { name: '安徽', value: 220, description: '中部省份', unit: '次' },
    { name: '江西', value: 200, description: '中部省份', unit: '次' },
    { name: '重庆', value: 180, description: '直辖市', unit: '次' },
    { name: '天津', value: 160, description: '直辖市', unit: '次' },
    { name: '陕西', value: 140, description: '西北省份', unit: '次' },
    { name: '内蒙古', value: 120, description: '北方省份', unit: '次' },
    { name: '山西', value: 100, description: '华北省份', unit: '次' },
    { name: '吉林', value: 80, description: '东北省份', unit: '次' },
    { name: '黑龙江', value: 60, description: '东北省份', unit: '次' },
    { name: '甘肃', value: 50, description: '西北省份', unit: '次' },
    { name: '新疆', value: 40, description: '西北省份', unit: '次' },
    { name: '青海', value: 30, description: '西北省份', unit: '次' },
    { name: '宁夏', value: 25, description: '西北省份', unit: '次' },
    { name: '西藏', value: 20, description: '西南省份', unit: '次' },
    { name: '云南', value: 150, description: '西南省份', unit: '次' },
    { name: '贵州', value: 130, description: '西南省份', unit: '次' },
    { name: '广西', value: 110, description: '华南省份', unit: '次' },
    { name: '海南', value: 90, description: '华南省份', unit: '次' },
    { name: '香港', value: 200, description: '特别行政区', unit: '次' },
    { name: '澳门', value: 80, description: '特别行政区', unit: '次' },
    { name: '台湾', value: 120, description: '省份', unit: '次' }
])

// 用户分布数据
const userData = ref([
    { name: '北京', value: 12000, description: '首都地区', unit: '人' },
    { name: '上海', value: 9800, description: '经济中心', unit: '人' },
    { name: '广东', value: 8500, description: '南方省份', unit: '人' },
    { name: '江苏', value: 7200, description: '东部省份', unit: '人' },
    { name: '浙江', value: 6800, description: '沿海省份', unit: '人' },
    { name: '山东', value: 5500, description: '北方省份', unit: '人' },
    { name: '四川', value: 4800, description: '西南省份', unit: '人' },
    { name: '湖北', value: 4200, description: '中部省份', unit: '人' },
    { name: '河南', value: 3800, description: '中原省份', unit: '人' },
    { name: '福建', value: 3200, description: '东南省份', unit: '人' },
    { name: '辽宁', value: 3000, description: '东北省份', unit: '人' },
    { name: '河北', value: 2800, description: '华北省份', unit: '人' },
    { name: '湖南', value: 2600, description: '中部省份', unit: '人' },
    { name: '安徽', value: 2400, description: '中部省份', unit: '人' },
    { name: '江西', value: 2200, description: '中部省份', unit: '人' },
    { name: '重庆', value: 2000, description: '直辖市', unit: '人' },
    { name: '天津', value: 1800, description: '直辖市', unit: '人' },
    { name: '陕西', value: 1600, description: '西北省份', unit: '人' },
    { name: '内蒙古', value: 1400, description: '北方省份', unit: '人' },
    { name: '山西', value: 1200, description: '华北省份', unit: '人' },
    { name: '吉林', value: 1000, description: '东北省份', unit: '人' },
    { name: '黑龙江', value: 800, description: '东北省份', unit: '人' },
    { name: '甘肃', value: 600, description: '西北省份', unit: '人' },
    { name: '新疆', value: 500, description: '西北省份', unit: '人' },
    { name: '青海', value: 400, description: '西北省份', unit: '人' },
    { name: '宁夏', value: 300, description: '西北省份', unit: '人' },
    { name: '西藏', value: 200, description: '西南省份', unit: '人' },
    { name: '云南', value: 1800, description: '西南省份', unit: '人' },
    { name: '贵州', value: 1600, description: '西南省份', unit: '人' },
    { name: '广西', value: 1400, description: '华南省份', unit: '人' },
    { name: '海南', value: 1200, description: '华南省份', unit: '人' },
    { name: '香港', value: 2500, description: '特别行政区', unit: '人' },
    { name: '澳门', value: 1000, description: '特别行政区', unit: '人' },
    { name: '台湾', value: 1500, description: '省份', unit: '人' }
])

// 销售额数据
const salesData = ref([
    { name: '北京', value: 850000, description: '首都地区', unit: '元' },
    { name: '上海', value: 720000, description: '经济中心', unit: '元' },
    { name: '广东', value: 680000, description: '南方省份', unit: '元' },
    { name: '江苏', value: 580000, description: '东部省份', unit: '元' },
    { name: '浙江', value: 520000, description: '沿海省份', unit: '元' },
    { name: '山东', value: 450000, description: '北方省份', unit: '元' },
    { name: '四川', value: 380000, description: '西南省份', unit: '元' },
    { name: '湖北', value: 320000, description: '中部省份', unit: '元' },
    { name: '河南', value: 280000, description: '中原省份', unit: '元' },
    { name: '福建', value: 250000, description: '东南省份', unit: '元' },
    { name: '辽宁', value: 220000, description: '东北省份', unit: '元' },
    { name: '河北', value: 200000, description: '华北省份', unit: '元' },
    { name: '湖南', value: 180000, description: '中部省份', unit: '元' },
    { name: '安徽', value: 160000, description: '中部省份', unit: '元' },
    { name: '江西', value: 140000, description: '中部省份', unit: '元' },
    { name: '重庆', value: 120000, description: '直辖市', unit: '元' },
    { name: '天津', value: 100000, description: '直辖市', unit: '元' },
    { name: '陕西', value: 80000, description: '西北省份', unit: '元' },
    { name: '内蒙古', value: 60000, description: '北方省份', unit: '元' },
    { name: '山西', value: 50000, description: '华北省份', unit: '元' },
    { name: '吉林', value: 40000, description: '东北省份', unit: '元' },
    { name: '黑龙江', value: 30000, description: '东北省份', unit: '元' },
    { name: '甘肃', value: 25000, description: '西北省份', unit: '元' },
    { name: '新疆', value: 20000, description: '西北省份', unit: '元' },
    { name: '青海', value: 15000, description: '西北省份', unit: '元' },
    { name: '宁夏', value: 12000, description: '西北省份', unit: '元' },
    { name: '西藏', value: 10000, description: '西南省份', unit: '元' },
    { name: '云南', value: 90000, description: '西南省份', unit: '元' },
    { name: '贵州', value: 70000, description: '西南省份', unit: '元' },
    { name: '广西', value: 60000, description: '华南省份', unit: '元' },
    { name: '海南', value: 50000, description: '华南省份', unit: '元' },
    { name: '香港', value: 150000, description: '特别行政区', unit: '元' },
    { name: '澳门', value: 80000, description: '特别行政区', unit: '元' },
    { name: '台湾', value: 100000, description: '省份', unit: '元' }
])

// 安徽地图数据
const ahuteData = ref([
    { name: '安徽工业大学-秀山校区', value: 5000, description: '安徽工业大学秀山校区数据', unit: '人' },
    { name: '振华图书馆', value: 1200, description: '图书馆区域', unit: '人' },
    { name: '7栋', value: 800, description: '学生宿舍7栋', unit: '人' },
    { name: '6栋', value: 750, description: '学生宿舍6栋', unit: '人' },
    { name: '4栋', value: 600, description: '学生宿舍4栋', unit: '人' },
    { name: 'A', value: 400, description: '教学楼A区', unit: '人' },
    { name: 'B', value: 350, description: '教学楼B区', unit: '人' },
    { name: 'C', value: 300, description: '教学楼C区', unit: '人' },
    { name: 'D', value: 250, description: '教学楼D区', unit: '人' }
])

// 安徽活跃度数据
const ahuteActivityData = ref([
    { name: '安徽工业大学-秀山校区', value: 95, description: '安徽工业大学秀山校区活跃度', unit: '%' },
    { name: '振华图书馆', value: 88, description: '图书馆区域活跃度', unit: '%' },
    { name: '7栋', value: 75, description: '学生宿舍7栋活跃度', unit: '%' },
    { name: '6栋', value: 70, description: '学生宿舍6栋活跃度', unit: '%' },
    { name: '4栋', value: 65, description: '学生宿舍4栋活跃度', unit: '%' },
    { name: 'A', value: 60, description: '教学楼A区活跃度', unit: '%' },
    { name: 'B', value: 55, description: '教学楼B区活跃度', unit: '%' },
    { name: 'C', value: 50, description: '教学楼C区活跃度', unit: '%' },
    { name: 'D', value: 45, description: '教学楼D区活跃度', unit: '%' }
])

// 马鞍山市数据
const maanshanData = ref([
    { name: '花山区', value: 1200, description: '花山区数据', unit: '人' },
    { name: '雨山区', value: 1000, description: '雨山区数据', unit: '人' },
    { name: '博望区', value: 800, description: '博望区数据', unit: '人' },
    { name: '当涂县', value: 600, description: '当涂县数据', unit: '人' },
    { name: '含山县', value: 400, description: '含山县数据', unit: '人' },
    { name: '和县', value: 300, description: '和县数据', unit: '人' }
])

// 更新主题
const updateTheme = (theme: string) => {
    currentTheme.value = theme
}
</script>

<style scoped>
.china-map-demo {
    padding: 20px;
    background: #f7f8fa;
    min-height: 100vh;
}

.china-map-demo h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto 40px auto;
}

.demo-item {
    min-height: 450px;
}

.demo-description {
    max-width: 800px;
    margin: 0 auto 30px auto;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.demo-description h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 18px;
    text-align: center;
}

.demo-description p {
    margin: 0 0 20px 0;
    color: #666;
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
}

.demo-modes {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.mode-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f0f9eb;
    border-radius: 6px;
    border: 1px solid #e1f3d8;
    flex: 1;
}

.mode-icon {
    font-size: 28px;
    color: #67c23a;
}

.mode-content h4 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 16px;
}

.mode-content p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

.control-panel {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.control-panel h3 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
    text-align: center;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.control-group label {
    min-width: 100px;
    font-weight: 500;
    color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .demo-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .demo-item {
        min-height: 350px;
    }

    .control-panel {
        margin: 0 16px;
        padding: 20px;
    }

    .control-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .control-group label {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .china-map-demo {
        padding: 16px;
    }

    .demo-grid {
        gap: 12px;
    }

    .control-panel {
        padding: 16px;
    }
}
</style>
